<template>
    <div class="rootMain">
        <el-form label-position="right" label-width="90px">
            <el-form-item label="含税销售额">
                <el-input v-model="oldTax"></el-input>
            </el-form-item>
            <el-form-item label="增值税率">
                <el-select
                    v-model="index"
                    placeholder="请选择"
                    @change="PickerChange"
                >
                    <el-option
                        v-for="(item, index) in picker"
                        :key="index"
                        :label="item"
                        :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <div class="result">
            <el-descriptions title="计算结果" :column="1">
                <el-descriptions-item label="不含税销售额(元)">
                    {{ newTax }}
                </el-descriptions-item>
                <el-descriptions-item label="增值税税额(元)">
                    {{ taxcount }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script>
export default {
    name: "taxcount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            index: "",
            picker: [
                "0%",
                "0.5%",
                "1%",
                "1.5%",
                "2%",
                "3%",
                "4%",
                "5%",
                "6%",
                "9%",
                "10%",
                "11%",
                "13%",
            ],
            oldTax: "",
            newTax: 0,
            taxcount: 0,
            taxPercent: "",
        };
    },
    watch: {
        oldTax(e) {
            if (
                this.taxPercent != "" ||
                this.taxPercent != null ||
                this.taxPercent != undefined
            ) {
                const oldTax = Number(e);
                const newTax =
                    oldTax / (1 + this.taxPercent.replace("%", "") / 100);
                this.newTax = newTax.toFixed(2);
                this.taxcount = (oldTax - Number(newTax)).toFixed(2);
            }
        },
    },
    created() {},
    mounted() {},
    computed: {},
    methods: {
        PickerChange(e) {
            console.log(e);
            this.index = e;
            this.taxPercent = this.picker[e];
            const oldTax = Number(this.oldTax);
            const newTax = oldTax / (1 + this.picker[e].replace("%", "") / 100);
            this.newTax = newTax.toFixed(2);
            this.taxcount = (oldTax - Number(newTax)).toFixed(2);
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}
</style>
